<template>
  <div>
    <div class="container">
      <!-- 上方按钮 -->
      <div class="handle-box">
        <!-- <span class="complaintTitle">投诉类型：</span> -->
        <!-- <el-select v-model="query.topStatus" placeholder="投诉类型" class="handle-select mr10">
          <el-option key="0" label="简历投诉" value="1"></el-option>
          <el-option key="1" label="职位投诉" value="0"></el-option>
        </el-select> -->
        <span class="complaintTitle">状态：</span>
        <el-select v-model="query.status" placeholder="请选择状态" class="handle-select mr10">
          <el-option key="0" label="未反馈" value="0"></el-option>
          <el-option key="1" label="已反馈" value="1"></el-option>
          <!-- <el-input v-model="query.title" placeholder="招聘会标题" class="handle-input mr10"></el-input> -->
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button type="primary" class="handle-del" @click="resetBtn">重置
        </el-button>
        <!-- <el-button type="primary" class="handle-del mr10" @click="addInfo">添加
        </el-button> -->
      </div>
      <!-- 下方按钮 -->
      <div class="handle-box">
        <el-button type="primary" class="handle-del" @click="delAllSelection">
          反馈
        </el-button>
        <el-button type="primary" class="handle-del mr10" @click="handleResetResumeAll">
          取消简历
        </el-button>
      </div>
      <!-- 表格部分 -->
      <el-table :data="tableData" class="table" :height="contentStyleObj.height" ref="multipleTable"
        header-cell-class-name="table-header" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="resumeName" label="举报简历" align="center">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" :href="'/zzrc/#/resumeDetail?id='+scope.row.resumeId">
              {{scope.row.resumeName}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="举报原因" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="companyName" label="企业名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="mail" label="电子邮箱"></el-table-column>
        <el-table-column prop="statusText" label="状态"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleFeedback(scope.$index, scope.row)">反馈</el-button>
            <el-button type="text" @click="handleResetResume(scope.$index, scope.row.resumeId)"> 取消简历</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="text-align: center;margin-top: 30px;">
        <el-pagination background @size-change="handleSizeChange" :current-page="query.page"
          layout="prev, pager, next, jumper, sizes, total" :total="pageTotal"
          :page-sizes="[5, 10, 20, 50, 150, 300, 500]" :page-size="query.size" @current-change="handlePageChange">
        </el-pagination>
      </div>
      <!-- 编辑弹出框 -->
      <el-dialog :visible.sync="editVisibleExamine" width="25%" class="elDialog">
        <p slot="title" class="elDialog-header">
          <span>反馈</span>
        </p>
        <el-form ref="feedbackRow" label-position="top" :model="feedbackRow" label-width="140px">
          <el-form-item label="回复内容:">
            <el-input type="textarea" maxlength="500" show-word-limit v-model="feedbackRow.feed" rows="5" cols="5"
              style="width:100%;"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="editVisibleExamine = false">取 消</el-button>
          <el-button type="primary" @click="determine">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { listPage, feedback, cancelResume } from '../../../api/resumeComplaint';
export default {
  name: 'resumeComplaint',
  data () {
    return {
      contentStyleObj: {
        height: ''
      },
      query: {
        arr: [
          { column: "status", type: "eq", value: 0 }
        ],
        sort: '',
        page: 1,
        size: 10,
        status: ''
      },

      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      editVisibleExamine: false,
      pageTotal: 0,
      // 反馈内容
      feedbackRow: {
        feed: ''
      }
    };
  },
  created () {
    if (this.$route.query.status == 0) {
      this.query.status = this.$route.query.status || ''
    }
    this.getData();
    // 监听浏览器窗口高度的方法
    // window.addEventListener('resize', this.getHeight);
    this.getHeight();
    // 获取默认路径
    this.url = process.env.VUE_APP_URL;
    // this.getExpressResume();
  },
  watch: {
    '$route.query.id': function (val, oldVal) {
      this.$nextTick(() => {
        this.getData();
      })
    },
    '$route.fullPath': function (val, oldVal) {
      this.$nextTick(() => {
        if (this.$route.query.status == 0) {
          this.query.status = this.$route.query.status || ''
          this.getData();
        }
      })
    }
  },
  methods: {
    // 获取窗口的高度 用于适配分页一直都在最下面
    getHeight () {
      this.contentStyleObj.height = document.documentElement && document.documentElement.clientHeight - 370 + 'px';
    },
    // 获取 数据
    getData () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      var formData = new FormData();
      formData.append('page', this.query.page);
      formData.append('size', this.query.size);
      if (this.query.status) {
        this.query.arr[0].value = Number(this.query.status)
        formData.append('condition', JSON.stringify(this.query.arr));
      } else {
        formData.append('condition', '');
      }


      listPage(formData).then(res => {
        console.log(res);
        if (res.success) {
          this.tableData = res.data.records;
          this.pageTotal = res.data.total
          loading.close()
        } else {
          loading.close()
          this.$message('数据返回错误')
        }
      }).catch(err => {
        loading.close()
        // this.$message('数据返回错误')
      });
    },
    // 触发搜索按钮
    handleSearch () {
      this.$set(this.query, 'page', 1);
      this.getData();
    },
    // 多选操作
    handleSelectionChange (val) {
      console.log(val)
      this.multipleSelection = val;
    },
    resetBtn () {
      this.query = {
        status: '',
        arr: [
          { column: "status", type: "eq", value: 0 }
        ],
        page: 1,
        size: 10
      }
      this.getData();
    },
    // 反馈简历
    delAllSelection () {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择要反馈的简历')
        return false
      }
      this.editVisibleExamine = true
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getData();
    },
    handleSizeChange (val) {
      console.log(val)
      this.query.size = val
      this.getData();
    },

    // 添加简历
    addInfo () { },
    // 单个反馈简历
    handleFeedback (index, row) {
      this.multipleSelection = [row]
      this.editVisibleExamine = true
    },
    //单个 取消简历
    handleResetResume (index, id) {
      // 二次确认
      this.$confirm('取消后简历变为审核不通过状态，简历将不可见。', '取消简历', {
        type: 'warning',
        customClass: 'message-logout'
      }).then(() => {
        let resumeIds = new FormData()
        resumeIds.append('resumeIds', id)
        cancelResume(resumeIds).then(res => {
          if (res.success) {
            this.$message.success('取消成功')
            this.getData();
          } else {
            this.$message.error(res.msg)
          }
        })
      })
        .catch(() => {
          console.log('取消')
        })
    },
    // 反馈弹框确定按钮
    determine () {
      if (!this.feedbackRow.feed) {
        this.$message.error('请输入反馈内容')
        return false
      }
      let Arr = []
      this.multipleSelection.map(res => {
        Arr.push({
          "id": res.id,
          "companyId": res.companyId,
          "resumeName": res.resumeName,
          "resumeId": res.resumeId,
          "reason": this.feedbackRow.feed
        })
      })
      feedback(Arr).then(res => {
        if (res.success) {
          this.$message.success('反馈成功')
          this.feedbackRow.feed = ''
        } else {
          this.$message.error(res.msg)
        }
      })
      this.editVisibleExamine = false
    },
    // 批量取消简历
    handleResetResumeAll () {
      if (this.multipleSelection.length == 0) {
        this.$message.error('请选择要取消的简历')
        return false
      }
      // 二次确认
      this.$confirm('取消后简历变为审核不通过状态，简历将不可见。', '取消简历', {
        type: 'warning',
        customClass: 'message-logout'
      }).then(() => {

        let ids = []
        this.multipleSelection.map(item => {
          ids.push(item.resumeId)
        })
        let resumeIds = new FormData()
        resumeIds.append('resumeIds', ids.join(','))
        cancelResume(resumeIds).then(res => {
          if (res.success) {
            this.$message.success('取消成功')
            this.getData();
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        console.log('取消')
      })
    }
  }
};
</script>

<style scoped>
.complaintTitle {
    font-size: 14px;
    color: #606266;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 200px;
    display: inline-block;
}

/* .handle-select /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 120px;
    display: inline-block;
} */
.handle-input {
    width: 300px;
    display: inline-block;
}
.handle-select /deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
    width: 300px !important;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 40px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.container /deep/ .el-dialog__body {
    padding: 10px 20px;
}
.container /deep/ .el-dialog__header {
    border-bottom: 1px solid #e5e5ee;
}
</style>

<style>
.message-logout {
    width: 400px;
}
.message-logout .el-message-box__btns {
    /* text-align: center; */
}
</style>
